<template>
	<view class="increase">
		<!-- <header-box :title="pageTitle"></header-box> -->
		<view class="increase-goods">
			<view class="increase-goods-box" v-if="collectionData">
				<view class="increase-goods-box-img">
					<!-- <image class="light-icon" src="../../static/img/lighting-bg.png" mode=""></image> -->
					<image class="_img" :src="collectionData.img" mode=""></image>
				</view>
				<view class="increase-goods-box-title multi-line"><text>{{collectionData.name}}</text></view>
			</view>
		</view>
		<view class="increase-main">
			<view class="increase-main-title"><text>转赠方</text></view>
			<view class="increase-main-val"><input class="_val-input" type="text" v-model="increasePhone" placeholder="请输入对方手机号"/></view>
			
			<view class="increase-confirm" @click="toPay"><text>确定转赠</text></view>
			<view class="increase-tips"><text>转赠需要支付藏品价值8%的手续费</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle:'转增',
				relId:'',
				collectionData:null,
				increasePhone:'', // 17606510455
				from:null,
			};
		},
		onLoad(option) {
			if (option.relId) {
				this.relId = option.relId
				this.getMyCollectionDetail()
				this.from = option.from;
			}
			
		},
		methods:{
			getMyCollectionDetail() {
				this.$api.getMyCollectionDetail({relId:this.relId}).then(res => {
					console.log(res)
					if (res.code == 200){
						this.collectionData = res.data;
					}
				})
			},
			toPay() {
				if (!this.increasePhone) {
					uni.showToast({
						title:'请输入对方手机号',
						icon:'none'
					})
					return false
				}
				this.$api.handsel({
					id:this.relId,
					mobile:this.increasePhone
				}).then(res => {
					console.log(res)
					if (res.code == 200) {
						uni.navigateTo({
							url:`/pages/cashier/cashier?type=3&price=${res.data.price}&orderNo=${res.data.orderNo}&from=${this.from}`
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.increase{
		width: 100%;
		min-height: 100vh;
		background-color: #16181D;
		font-family: PingFangSC-Medium, PingFang SC, '微软雅黑';
		font:caption;
		display: flow-root;
		.increase-goods{
			width: 100%;
			.increase-goods-box{
				width: 549rpx;
				height: 654rpx;
				background: #262A34;
				border-radius: 32rpx;
				margin: 48rpx auto 0;
				.increase-goods-box-img{
					width: 100%;
					height: 549rpx;
					border-radius: 32rpx;
					background-color: rgba(17,19,19,1);
					overflow: hidden;
					position: relative;
					.light-icon{
						width: 100%;
						height: 422rpx;
						position: absolute;
						top: 0;
						z-index: 0;
					}
					._img{
						width: 100%;
						height: 100%;
					}
				}
				.increase-goods-box-title{
					font-size: 28rpx;
					font-weight: 400;
					color: #FFFFFF;
					text-align: center;
					margin-top: 28rpx;
				}
			}
		}
		.increase-main{
			width: 100%;
			padding: 0 48rpx;
			box-sizing: border-box;
			margin-top: 60rpx;
			.increase-main-title{
				font-size: 24rpx;
				font-weight: 400;
				color: #5E6272;
				line-height: 32rpx;
			}
			.increase-main-val{
				width: 100%;
				height: 96rpx;
				background: rgba(0, 0, 0, 0.4);
				border-radius: 24rpx;
				margin-top: 16rpx;
				._val-input{
					width: 100%;
					height: 100%;
					line-height: 96rpx;
					font-size: 32rpx;
					font-weight: 600;
					color: #5E6272;
					padding-left: 32rpx;
					box-sizing: border-box;
				}
			}
			.increase-confirm{
				width: 462rpx;
				height: 88rpx;
				background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
				border-radius: 50rpx;
				line-height: 88rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
				margin: 120rpx auto 0;
			}
			.increase-tips{
				text-align: center;
				font-size: 24rpx;
				font-weight: 400;
				color: #9D7DFF;
				line-height: 34rpx;
				margin-top: 24rpx;
			}
		}
	}
</style>
